<template>
  <div>
    <div class="navbar-div">
      <van-nav-bar title="购物车" /> 
    </div>
    <!--清空购物车-->
    <div class="card-title">
      <van-button size="small" type="danger" @click="clearCart" plain>清空购物车</van-button>
    </div>
    <!--显示购物车中的商品-->
    <div class="cart-list">
      <div class="pang-row" v-for="(item,index) in cartInfo" :key="index">
        <div class="pang-img"><img :src="item.image" width="100%" /></div>
        <div class="pang-text">
          <div class="pang-goods-name">{{item.name}}</div>
          <div class="pang-control"><van-stepper v-model="item.count" /></div>
        </div>
        <div class="pang-goods-price">
          <div>￥{{item.price |moneyFilter}}</div>
          <div>x{{item.count}}</div>
          <div class="allPrice">￥{{item.price | getGoodTotalMoney(item) | moneyFilter}}</div>
        </div>
      </div>
      <!--显示总金额-->
      <div class="totalMoney">
        商品总价：￥ {{totalMoney | moneyFilter}}
      </div>
      <!-- 下单按钮 -->
      <div class="buySomting">
        <van-button class="buy-btn" type="danger" @click="buySomthing()">立即下单</van-button>
      </div>
    </div>
    <div class="cartNothing" v-if="isEmpty">
      <div class="tips">
        <div class="cart-img"><van-icon name="cart-o" /></div>
        <div class="cart-text">购物车还是空的哦</div>
        <van-button @click="goCategoryList" class="cart-button" size="small">去逛逛</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import toMoney from '@/filters/moneyFilter.js'
  export default {
    name: 'Cart',
    data() {
      return {
        cartInfo: [],     //购物车内的商品
        isEmpty : false , //购物车是否为空，为空则显示true，不为空显示false
      }
    },
    computed: {
      totalMoney() {
        let total = 0;
        this.cartInfo.forEach((item, index) => {
          total += item.price * item.count;
        })
        localStorage.cartInfo = JSON.stringify(this.cartInfo);
        return total;
      }
    },
    filters: {
      getGoodTotalMoney(money, item) {
        return money * item.count;
      },
      moneyFilter(money) {
        return toMoney(money);
      }
    },
    created(){
      this.getCartInfo()
    },
    activated() {
      this.getCartInfo()
    },
    methods: {
      //得到购物车的商品
      getCartInfo() {
        //判断localStorage里是否有购物车数据
        if(localStorage.cartInfo){
            //如果有数据，则赋值给cartInfo
            this.cartInfo = JSON.parse(localStorage.cartInfo)
        }
        // console.log(' this.cartInfo:'+JSON.stringify( this.cartInfo))
        this.isEmpty = this.cartInfo.length>0 ? false : true
      },
      //清空购物车的商品
      clearCart(){
        localStorage.removeItem('cartInfo')
        this.cartInfo=[];
        this.isEmpty = true;
      },
      // 点击去逛逛时，跳转到商品分类页
      goCategoryList() {
        this.$router.push({name:'CategoryList'})
      },
      // 购买所有商品
      buySomthing() {
        this.clearCart();
        this.$toast.success('下单成功，正在发货！')
      }
    },
  }
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/common.styl';
.navbar-div {
  /deep/ .van-nav-bar {
    background-color: $colorC;
  }
  /deep/ .van-nav-bar__title {
    font-weight: bold;
  }
}
.card-title{
  height: 2rem;
  line-height:2rem;
  background-color: #fff;
  border-bottom:1px solid #E4E7ED;
  padding:5px;
  text-align: right;
}
.cart-list{
  background-color: #fff;
}
.pang-row{
  display: flex;
  flex-direction: row;
  flex-wrap:nowrap;
  padding:0.5rem;
  font-size:0.85rem;
  border-bottom:1px solid #E4E7ED;
}
.pang-img{
  flex:6;
}
.pang-text{
  flex:11;
  padding-left:10px;
}
.pang-control{
  padding-top: 10px;
}
.pang-goods-price{
  flex:7;
  text-align: right;
  .allPrice {
    margin-top: .875rem;
    font-weight: bold;
    color: red;
  }
}
.totalMoney{
  text-align: right;
  background-color: #fff;
  border-bottom:1px solid #E4E7ED;
  padding: .375rem;
  margin-top: .875rem;
  font-weight: bold;
  font-size: 1rem;
  color: red;
}

// 购物车为空时，显示提示
.cartNothing {
  position: absolute;
  top: 46px;
  bottom: 50px;
  left: 0px;
  right: 0px;
  background-color: #f6f6f6;
  .tips {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    .cart-img {
      height: 80px;
      width: 80px;
      margin: 0 auto 10px auto;
      text-align: center;
      font-size: 40px;
      line-height: 90px;
      border-radius: 50%;
      background-color: #ccc;
    }
    .cart-text {
      text-align: center;
      font-size: 14px;
    }
    .cart-button {
      width: 100%;
      background-color: $colorA;
      color: #eee;
      margin-top: 10px;
    }
  }
}
// “购买”按钮
.buySomting {
  box-sizing: border-box;
  width: 100%;
  padding 0 5px;
  margin-top: 10px;
  .buy-btn {
    width: 100%;
  }
}
</style>